import React from 'react';
import { Typography, Card, Form, Input, Button, Row, Col, Avatar } from 'antd';
import { UserOutlined, EditOutlined } from '@ant-design/icons';

const { Title } = Typography;

const UserProfile: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('更新用户信息:', values);
    // TODO: 更新用户信息
  };

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{ background: '#fff', padding: '24px', borderRadius: '8px' }}>
        <Title level={2} style={{ marginBottom: 24 }}>个人信息</Title>
        
        <Row gutter={24}>
        <Col span={8}>
          <Card>
            <div style={{ textAlign: 'center' }}>
              <Avatar size={100} icon={<UserOutlined />} style={{ marginBottom: 16 }} />
              <Title level={4}>张三</Title>
              <p>用户ID: 12345</p>
              <Button type="primary" icon={<EditOutlined />}>
                编辑头像
              </Button>
            </div>
          </Card>
        </Col>
        
        <Col span={16}>
          <Card title="基本信息" extra={<Button type="link">编辑</Button>}>
            <Form
              form={form}
              layout="vertical"
              onFinish={onFinish}
              initialValues={{
                name: '张三',
                phone: '13800138000',
                email: 'zhangsan@example.com',
                idCard: '110101199001011234',
                address: '北京市朝阳区xxx街道xxx号',
              }}
            >
              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    label="姓名"
                    name="name"
                    rules={[{ required: true, message: '请输入姓名' }]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    label="手机号"
                    name="phone"
                    rules={[{ required: true, message: '请输入手机号' }]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={12}>
                  <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
                <Col span={12}>
                  <Form.Item
                    label="身份证号"
                    name="idCard"
                    rules={[{ required: true, message: '请输入身份证号' }]}
                  >
                    <Input />
                  </Form.Item>
                </Col>
              </Row>

              <Form.Item
                label="地址"
                name="address"
              >
                <Input.TextArea rows={3} />
              </Form.Item>

              <Form.Item>
                <Button type="primary" htmlType="submit">
                  保存修改
                </Button>
              </Form.Item>
          </Form>
        </Card>
      </Col>
    </Row>
      </div>
    </div>
  );
};

export default UserProfile;
